<!--  -->
<template>
  <el-form :label-width="formLabelWidth">
    <el-form-item :label="title" style="margin-bottom:0px;">
      <el-select size="mini" v-model="fontFamilay" placeholder="请选择">
        <el-option :label="'默认'" :value="''">
        </el-option>
        <el-option v-for="(item,index ) in fontFamilaies" :key="index" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  mounted () {
    this.fontFamilay = this.defValue
  },
  props: {
    formLabelWidth: {
      type: String,
      default: '120px'
    },
    defValue: {
      type: String
    },
    chgValue: {
      type: Function
    },
    title: {
      type: String,
      default: '选择字体'
    }
  },
  data () {
    return {
      fontFamilay: '',
      fontFamilaies: [
        { value: '宋体,SimSun', label: '宋体' },
        { value: '微软雅黑,Microsoft YaHei', label: '微软雅黑' },
        { value: '楷体,楷体_GB2312,SimKai', label: '楷体' },
        { value: '黑体,SimHei', label: '黑体' },
        { value: '隶书,SimLi', label: '隶书' },
        { value: 'andale mono', label: 'Andale Mono' },
        { value: 'arial,helvetica,sans-serif', label: 'Arial' },
        { value: 'arial black,avant garde', label: 'Arial Black' },
        { value: 'comic sans ms', label: 'Comic Sans Ms' },
        { value: 'impact,chicago', label: 'Impact,chicago' },
        { value: 'times new roman', label: 'Times New Roman' }
      ]
    }
  },
  watch: {
    fontFamilay: {
      handler () {
        this.chgValue(this.fontFamilay)
      },
      deep: true
    }
  }
}

</script>
